<!--
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2021-12-02 09:21:48
 * @LastEditors: GGB
 * @LastEditTime: 2021-12-07 16:32:40
-->
<template lang="html">
  <div class="main" >
    <!-- 左侧菜单栏 -->
    <div class="menu">
      <span @click="handle(category)"  v-for="category in categories" :key="category.id" :class="[activeId==category.id?'active':'','menu-item' ]" >
        {{category.title}}
      </span>
     <i class="el-icon-position up" @click="up"></i>
    </div>
    
    <!-- 内容部分 -->
    <div class="content" ref="content" v-loading="loading"  >
      <div class="product-item" @click="handleProduct(product)" v-for="(product,index) in products" :key="index">
        <el-image style="width:180px;height:180px;flex-shrink:1;" fit="cover" :src="product.pict_url+'_270x270xzq90.jpg_.webp'" />
        <div class="right">
          <div class="title">{{product.title}}</div>
          <div class="price">
            <span class="origin">原价:59 </span>
            <span class="after">券后价: 39.00</span>
          </div>
            <div class="info">{{product.volume}} · 人已购买</div>
            <el-button type="warning" @click.stop="handleCoupon(product)"  class="discovery-buy-btn">领券购买</el-button>
        </div>
      </div>
    </div>
    <!-- 广告部分 -->
    <div class="ad">
      <el-carousel trigger="click" class="ad-box">
        <el-carousel-item v-for="item in 4"  :key="item">
          <el-image class="img" fit="cover" src="https://gw.alicdn.com/bao/uploaded/i3/2458110253/O1CN015VpFNb1DjuvdDyARU_!!0-item_pic.jpg_270x270xzq90.jpg_.webp" />
        </el-carousel-item>
    </el-carousel>
    </div>
  </div>
</template>

<script>
import { getCategories, getCategoryContent } from "@/api";
import {
  infiniteScroll,
  infiniteScrollDisabled,
  infiniteScrollDistance,
} from "@/directive/scroll";
// const throttle = (fn, wait) => {
//   var pre = Date.now();
//   console.log(pre);
//   return function () {
//     var context = this;
//     var args = arguments;
//     var now = Date.now();
//     console.log(now - pre);
//     if (now - pre >= wait) {
//       fn.apply(context, args);
//       pre = Date.now();
//     }
//   };
// };

export default {
  name: "Index",
  directives: {
    infiniteScroll,
    infiniteScrollDisabled,
    infiniteScrollDistance,
  }, //使用自定义指令
  data() {
    return {
      activeId: 0,
      products: [],
      loading: false,
      scroll: false,
      page: 1,
    };
  },
  methods: {
    async handle(item) {
      this.products = [];
      this.activeId = item.id;
      this.loading = true;
      let { data: products } = await getCategoryContent(
        this.activeId,
        this.page
      );
      this.loading = false;

      this.products = products;
    },
    up() {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
    loadMore() {
      if (this.loading) return;
      this.page++;
      this.loading = true;
      getCategoryContent(this.activeId, this.page)
        .then((res) => {
          this.products = [...this.products, ...res.data];
        })
        .catch((err) => {
          this.page--;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleProduct(item) {
      window.open(item.click_url, "_blank");
    },
    handleCoupon(item) {
      window.open(item.coupon_click_url, "_blank");
    },
  },
  // async mounted() {
  //   this.loading = true;
  //   let { data: categories } = await getCategories();
  //   let { data: products } = await getCategoryContent(categories[0].id, 1);
  //   this.loading = false;
  //   this.categories = categories;
  //   this.activeId = categories[0].id;
  //   this.products = products;
  // },
  async asyncData({
    isDev,
    route,
    store,
    env,
    params,
    query,
    req,
    res,
    redirect,
    error,
  }) {
    let { data: categories } = await getCategories();
    let { data: products } = await getCategoryContent(categories[0].id, 1);
    return { categories, activeId: categories[0].id, products };
  },
  /**
   * 配置seo信息
   */
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: "ggb学习nuxt笔记、首页、领券",
        },
        {
          hid: "keywords",
          name: "keywords",
          content: "ggg,学习nuxt,vue,study",
        },
        { name: "format-detection", content: "telephone=no" },
      ],
    };
  },
};
</script>

<style lang="scss" scope>
.main {
  width: 1140px;
  // overflow-y: auto;
  min-height: 80vh;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  position: relative;

  .menu {
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
    box-shadow: 0 5px 10px #d4d4d4;
    display: flex;
    margin-left: 5px;
    flex-direction: column;
    .up {
      margin: 0 auto;
      margin-bottom: -30px;
      margin-top: 14px;
      cursor: pointer;
    }
    .menu-item {
      width: 105px;
      height: 40px;
      line-height: 40px;

      list-style: none;
      cursor: pointer;
      text-align: center;
      &:hover {
        color: #fff;
        background: #ff4500;
      }
    }
    .active {
      color: #fff;
      background: #ff4500;
    }
  }
  .content::-webkit-scrollbar {
    display: none; /*隐藏滚动条*/
  }
  .content {
    width: 710px;
    height: 100%;
    margin-left: 30px;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    // overflow-y: auto;
    padding: 0 10px;

    .product-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      padding: 10px;
      background: #fff;
      box-shadow: 0 5px 10px #d4d4d4;
      margin-bottom: 15px;

      .right {
        margin-left: 10px;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        .title {
          cursor: pointer;
          max-width: 500px;
          font-weight: 600;
          font-size: 22px;
          color: #47494e;
        }
        .price {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-start;
          font-weight: 600;
          margin-top: 10px;
          margin-bottom: 10px;
          font-size: 16px;
          .origin {
            color: #999;
          }
          .after {
            color: #ff4500;
          }
        }
        .info {
          margin-top: 10px;
          margin-bottom: 10px;
          font-size: 16px;
        }
        .discovery-buy-btn {
          text-decoration: none;
          padding: 8px 20px;
          border-radius: 5px;
          align-self: flex-end;
          background-color: #f56c6c;
          border-color: #f56c6c;
          color: #fff;
        }
      }
    }
  }

  .ad {
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
    .ad-box {
      box-shadow: 0 5px 10px #d4d4d4;
      width: 270px;
      margin-right: 5px;
    }
  }
}
.el-carousel__container {
  height: 270px;
  width: 270px;
}
</style>
